<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置缓存 -->
    <!-- 设定网页的到期时间  -->
    <meta http-equiv="Expires" content="-1">
    <!-- 清除缓存（再访问这个网站要重新下载！） -->
    <meta http-equiv="Cache-Control" content="no-cache">
    <!-- 禁止浏览器从本地机的缓存中调阅页面内容，访问者将无法脱机浏览 -->
    <meta http-equiv="Pragma" content="no-cache">

    <!-- author用于定义网页作者 -->
    <meta name="author" content="aicoder.com">
    <!-- 就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加到主屏幕后，app全屏显示 -->
    <meta content="yes" name="apple-touch-fullscreen" />

    <!-- 默认设备会自动识别任何可能是电话和邮箱的字符串。设置telephone=no可以禁用这项功能。 -->
    <meta content="telephone=no,email=no" name="format-detection" />

    <!-- UC浏览器私有 -->
    <!-- 全屏模式 -->
    <meta name="full-screen" content="yes">
    <!-- 应用模式 -->
    <meta name="browsermode" content="application">

    <!-- QQ浏览器私有 -->
    <!-- 全屏模式 -->
    <meta name="x5-fullscreen" content="true">
    <!-- 应用模式 -->
    <meta name="x5-page-mode" content="app">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/swiper-4.5.0/dist/css/swiper.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/fontshop/iconfont.css">
    <script src="./lib/hotcss-v2.0.1/imochen-hotcss/src/hotcss.js"></script>
    <!-- <script src="./js/rem.js"></script> -->
    <title>Document</title>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header class="top-hd">
            <div class="log-wrap"><img src="./img/首页/logo.png"></div>
            <div class="search-wrap"><input type="text" id="searchTxt" placeholder="搜索商品/商铺" class="search-txt"><i
                    class="iconfont icon-sousuo"></i></div>
            <div class="Message-wrap"><i class="iconfont icon-xiaoxi"></i><span>消息</span></div>
        </header>
        <main>
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/首页/轮播图/carousel.1.png"></div>
                    <div class="swiper-slide"><img src="./img/首页/轮播图/carousel.2.png"></div>
                    <div class="swiper-slide"><img src="./img/首页/轮播图/carousel.3.png"></div>
                    <div class="swiper-slide"><img src="./img/首页/轮播图/carousel.4.png"></div>
                    <div class="swiper-slide"><img src="./img/首页/轮播图/carousel.5.png"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 导航栏 -->
            <div class="layer-navigation">
                <div class="layer-interval"></div>
                <div class="navigation-wrap">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-muying"></i>
                                <p>母婴品</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-chaoshi"></i>
                                <p>超市购</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-miaosha"></i>
                                <p>秒刷拍</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-yichongzhiqianyue"></i>
                                <p>易充值</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="layer-interval"></div>
            </div>
            <!-- 秒杀区域 -->
            <div class="item-area layer-Spike">
                <div class="item-area-hd Spike-hd">
                    <div class="item-area-hd-l Spike-hd-l">
                        <i class="iconfont icon-shijianlishijilujishizhongbiaoxianxing"></i>
                        <span class="item-area-hd-l-txt Spike-txt">秒杀</span>
                        <div class="Spike-hd-l-reciprocal" id="reciprocal">
                            <span class="value">1</span>
                            <span class="value">2</span>
                            <span class="Separator">:</span>
                            <span class="value">3</span>
                            <span class="value">4</span>
                            <span class="Separator">:</span>
                            <span class="value">5</span>
                            <span class="value">6</span>
                        </div>
                    </div>
                    <div class="item-area-hd-r Spike-hd-r">
                        <span>更多</span><i class="iconfont icon-moreinfo-copy-copy"></i>
                    </div>
                </div>
                <div class="item-area-bd Spike-bd">
                    <ul>
                        <li>
                            <p><img src="./img/首页/秒杀区域/良品铺子.png"></p>
                            <h3><img src="./img/首页/秒杀区域/秒杀价.png"></h3>
                            <i><img src="./img/首页/秒杀区域/手机专属.png"></i>
                        </li>
                        <li>
                            <p><img src="./img/首页/秒杀区域/品胜.png"></p>
                            <h3><img src="./img/首页/秒杀区域/秒杀价.png"></h3>
                            <i><img src="./img/首页/秒杀区域/手机专属.png"></i>
                        </li>
                        <li>
                            <p><img src="./img/首页/秒杀区域/美肤宝.png"></p>
                            <h3><img src="./img/首页/秒杀区域/秒杀价.png"></h3>
                            <i><img src="./img/首页/秒杀区域/手机专属.png"></i>
                        </li>
                    </ul>
                </div>
                <div class="layer-interval"></div>
            </div>
            <!-- 女装区域 -->
            <div class="item-area layer-clothes">
                <div class="item-area-hd clothes-hd">
                    <div class="item-area-hd-l clothes-hd-l">
                        <i class="iconfont icon-nvzhuang"></i>
                        <span class="item-area-hd-l-txt clothes-txt">女装</span>
                    </div>
                    <div class="item-area-hd-r clothes-hd-r">
                        <span>更多</span><i class="iconfont icon-moreinfo-copy-copy"></i>
                    </div>
                </div>
                <div class="item-area-bd clothes-bd">
                    <div class="clothes-bd-l">
                        <img src="./img/首页/女装区域/商品图1.png" alt="">
                    </div>
                    <div class="clothes-bd-r">
                        <ul>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图2.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>韩版小西装</h2>
                                        <h3>全场5折起</h3>
                                    </div>
                                </a></li>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图3.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>欧式连衣裙</h2>
                                        <h3>全场6折起</h3>
                                    </div>
                                </a></li>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图4.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>中式晚礼服</h2>
                                        <h3>全场9折起</h3>
                                    </div>
                                </a></li>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图5.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>韩版小西装</h2>
                                        <h3>全场5折起</h3>
                                    </div>
                                </a></li>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图6.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>欧式连衣裙</h2>
                                        <h3>全场6折起</h3>
                                    </div>
                                </a></li>
                            <li><a href="#"><img src="./img/首页/女装区域/商品图7.png">
                                    <div class="clothes-bd-r-txt">
                                        <h2>中式晚礼服</h2>
                                        <h3>全场9折起</h3>
                                    </div>
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div class="layer-interval"></div>
            </div>
            <!-- 运动区域-->
            <div class="item-area layer-sport">
                <div class="item-area-hd sport-hd">
                    <div class="item-area-hd-l sport-hd-l">
                        <i class="iconfont icon-gongxiang-"></i>
                        <span class="item-area-hd-l-txt sport-txt">运动</span>
                    </div>
                    <div class="item-area-hd-r sport-hd-r">
                        <span>更多</span><i class="iconfont icon-moreinfo-copy-copy"></i>
                    </div>
                </div>
                <div class="item-area-bd sport-bd">
                    <div class="item-area-bd-l"><img src="./img/首页/运动区域/商品图1.png"></div>
                    <div class="item-area-bd-r">
                        <ul>
                            <li><img src="./img/首页/运动区域/商品图2.png" class="Short-picture"></li>
                            <li><img src="./img/首页/运动区域/商品图3.png" class="Long-picture"></li>
                            <li><img src="./img/首页/运动区域/商品图4.png" class="Long-picture"></li>
                            <li><img src="./img/首页/运动区域/商品图5.png" class="Short-picture"></li>
                        </ul>
                    </div>
                </div>
                <div class="layer-interval"></div>
            </div>
            <!-- 箱子配饰区域 -->
            <div class="item-area layer-handbag">
                <div class="item-area-hd handbag-hd">
                    <div class="item-area-hd-l handbag-hd-l">
                        <i class="iconfont icon-xiangbao"></i>
                        <span class="item-area-hd-l-txt handbag-txt">箱子配饰</span>
                    </div>
                    <div class="item-area-hd-r handbag-hd-r">
                        <span>更多</span><i class="iconfont icon-moreinfo-copy-copy"></i>
                    </div>
                </div>
                <div class="item-area-bd handbag-bd">
                    <div class="item-area-bd-l"><img src="./img/首页/箱包区域/商品图1.png"></div>
                    <div class="item-area-bd-r">
                        <ul>
                            <li><img src="./img/首页/箱包区域/商品图2.png" class="Short-picture"></li>
                            <li><img src="./img/首页/箱包区域/商品图3.png" class="Long-picture"></li>
                            <li><img src="./img/首页/箱包区域/商品图4.png" class="Long-picture"></li>
                            <li><img src="./img/首页/箱包区域/商品图5.png" class="Short-picture"></li>
                        </ul>
                    </div>
                </div>
                <div class="layer-interval"></div>
            </div>
            <!-- 母婴玩具区域 -->
            <div class="item-area layer-toy">
                <div class="item-area-hd toy-hd">
                    <div class="item-area-hd-l toy-hd-l">
                        <i class="iconfont icon-7"></i>
                        <span class="item-area-hd-l-txt toy-txt">母婴玩具</span>
                    </div>
                    <div class="item-area-hd-r toy-hd-r">
                        <span>更多</span><i class="iconfont icon-moreinfo-copy-copy"></i>
                    </div>
                </div>
                <div class="item-area-bd toy-bd">
                    <div class="item-area-bd-l"><img src="./img/首页/母婴玩具区域/商品图1.png"></div>
                    <div class="item-area-bd-r">
                        <ul>
                            <li><img src="./img/首页/母婴玩具区域/商品图2.png" class="Short-picture"></li>
                            <li><img src="./img/首页/母婴玩具区域/商品图3.png" class="Long-picture"></li>
                            <li><img src="./img/首页/母婴玩具区域/商品图4.png" class="Long-picture"></li>
                            <li><img src="./img/首页/母婴玩具区域/商品图5.png" class="Short-picture"></li>
                        </ul>
                    </div>
                </div>
                <div class="layer-interval"></div>
            </div>

        </main>
        <!-- 底部 -->
        <footer>
            <div class="footer-list">
                <ul>
                    <li><a href="index.html"><i class="iconfont icon-shouye2"></i><span>首页</span></a></li>
                    <li><i class="iconfont icon-sousuo"></i><span>搜索</span></li>
                    <li><i class="iconfont icon-leimupinleifenleileibie"></i><span>分类</span></li>
                    <li><a href="cart.html"><i class="iconfont icon-gouwuche"></i><span>购物车</span></a></li>
                    <li><a href="mine.html"><i class="iconfont icon-sself"></i><span>我的</span></a></li>
                </ul>
            </div>
        </footer>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/jquery-1.11.3.js"></script>
<script src="./lib/swiper-4.5.0/dist/js/swiper.js"></script>
<script src="./js/indexData.js"></script>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>

</html>